<template>
  <div class="high-quality-container">
    <div class="hq-head clearfix">
      <h2>精品歌单</h2>
      <!-- 精品歌单分类 -->
      <div class="type" @click="showBox">{{ targetType }}></div>
      <div class="type-box" v-show="showBoxState">
        <div class="type-box-head" @click="changeCatInHead">
          <span :class="{ active: targetType === '全部' }">全部歌单</span>
        </div>
        <div class="type-box-body">
          <ul>
            <li v-for="(item, index) in highQualityTagNameList" :key="index" @click="changeCat(item)">
              <span :class="{ active: targetType === item }">{{ item }}</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="hq-body">
      <div ref="songGroupsRef" class="songGroups" style="overflow: auto" v-infinite-scroll="load" infinite-scroll-disabled="disabled" infinite-scroll-immediate="false">
        <div class="clearfix">
          <SongGroup v-for="item in highQualityPlayList" :key="item.id" :id="item.id" :name="item.name" :pic="item.coverImgUrl" :playCount="item.playCount"></SongGroup>
        </div>
        <p v-if="loading">加载中...</p>
        <p v-if="noMore && !loading">没有更多了</p>
      </div>
    </div>
  </div>
</template>

<script>
import SongGroup from '@/components/SongGroup/SongGroup.vue'

import { getHighQualityPlayListTagsAPI, getHighQualityPlayListAPI } from '@/api/songGroupAPI.js'
export default {
  name: 'HighQualitySongGroup',
  components: {
    SongGroup
  },
  data() {
    return {
      targetType: this.$route.query.cat,
      limit: this.$route.query.limit,
      showBoxState: false,
      highQualityTagNameList: [],
      highQualityPlayList: [],
      highQualityPlayListTotal: null,
      currentPage: 1,
      before: null,
      loading: false,
      isfirst: true
    }
  },
  computed: {
    noMore() {
      return this.highQualityPlayList.length === this.highQualityPlayListTotal
    },
    disabled() {
      return this.loading || this.noMore
    }
  },
  created() {
    this.initHighQualityTagList()
    this.initHighQualityPlayList(this.isfirst)
  },
  mounted() {
    this.getHight()
  },
  methods: {
    // 获取精品歌单列表标签
    async initHighQualityTagList() {
      const { data: res } = await getHighQualityPlayListTagsAPI()
      this.highQualityTagNameList = res.tags.map((item) => {
        return item.name
      })
    },
    showBox() {
      this.showBoxState = !this.showBoxState
    },
    changeCatInHead() {
      this.targetType = '全部'
      this.showBoxState = false
    },
    changeCat(item) {
      this.targetType = item
      this.showBoxState = false
    },
    // 获取精品歌单列表
    async initHighQualityPlayList(create) {
      const { data: res } = await getHighQualityPlayListAPI(this.targetType, this.limit, this.before)
      if (create) {
        console.log('total=' + res.total)
        this.highQualityPlayListTotal = res.total
      }
      this.highQualityPlayList.push(...res.playlists)
      this.before = this.highQualityPlayList[this.highQualityPlayList.length - 1].updateTime
    },
    load() {
      this.loading = true
      setTimeout(() => {
        this.initHighQualityPlayList()
        this.loading = false
      }, 2000)
    },
    // 获取可视区域高度，用来设置 songGroups 的高度
    getHight() {
      // 屏幕可视区域高度
      let sh = document.documentElement.clientHeight || document.body.clientHeight
      console.log(sh)
      // songGroups 高度
      let sgh = sh - 59 - 61 - 30 - 10 - 60 - 1
      this.$refs.songGroupsRef.style.height = sgh + 'px'
    }
  },
  watch: {
    targetType() {
      // 切换类型后，重置 before 和 highQualityPlayList
      this.before = null
      this.highQualityPlayList = []
      this.initHighQualityPlayList(this.isfirst)
      this.$router.push({
        path: '/find-music/high-quality',
        query: {
          cat: this.targetType,
          limit: 30
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.clearfix::before,
.clearfix::after {
  content: '';
  display: table;
}
.clearfix::after {
  clear: both;
}
.clearfix {
  *zoom: 1;
}
.high-quality-container {
  margin: 0 auto;
  width: 1088px;
  .hq-head {
    position: relative;
    height: 30px;
    h2 {
      float: left;
      line-height: 30px;
      font-size: 21px;
    }
    .type {
      float: right;
      padding: 0 15px;
      margin-top: 5.6px;
      font-size: 13px;
      background-color: #fff;
      border: 1px solid #d8d8d8;
      border-radius: 14px;
      cursor: pointer;
      &:hover {
        background-color: #f2f2f2;
      }
    }
    .type-box {
      position: absolute;
      z-index: 1;
      top: 35px;
      right: 0;
      width: 500px;
      background-color: #fff;
      border-radius: 5px;
      box-shadow: 0 0 10px -2px rgba(0, 0, 0, 0.6);
      .type-box-head {
        width: 500px;
        height: 55px;
        font-size: 14px;
        border-bottom: 1px solid #e5e5e5;
        span {
          float: left;
          margin-top: 12.5px;
          margin-left: 15px;
          padding: 0 10px;
          height: 30px;
          line-height: 30px;
          font-size: 14px;
          border-radius: 15px;
        }
      }
      .type-box-body {
        ul {
          overflow: hidden;
          li {
            float: left;
            width: 100px;
            height: 50px;
            line-height: 50px;
            text-align: left;
            cursor: pointer;
            &:hover {
              color: #ec4141;
            }
            span {
              margin-left: 5px;
              padding: 0 10px;
              height: 30px;
              font-size: 14px;
              // background-color: #fff;
              border-radius: 15px;
            }
          }
        }
      }
      .active {
        background-color: #fdf5f5;
        color: #ec4141;
      }
    }
  }
  .hq-body {
    margin-top: 10px;
    .songGroups {
      overflow: hidden;
      margin-left: -10px;
      /*滚动条*/
      &::-webkit-scrollbar {
        width: 5px;
      }

      /*滑块部分*/
      &::-webkit-scrollbar-thumb {
        background-color: #ccc9cd;
        border-radius: 2.5px;
      }
      /deep/ .song-group-box-card {
        float: left;
        margin-left: 10px;
        margin-bottom: 20px;
      }
    }
    p {
      font-size: 14px;
      color: gray;
    }
  }
}
</style>
